An animated PNG (displays as static image in some web browsers) |
|
| Filename extension | .png .apng |
|---|---|
| Initial release | August 4, 2008 |
| Type of format | animated raster image format |
| Extended from | PNG |
| Open format? | yes |
The Animated Portable Network Graphics (APNG) file format is an unofficial extension to the Portable Network Graphics (PNG) specification. It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files.
The first frame of an APNG file is stored as a normal PNG stream, so most old PNG decoders are able to display the first frame of an APNG file. The frame speed data and extra animation frames are stored in extra chunks (as provided for by the original PNG specification).
APNG competes with Multiple-image Network Graphics (MNG), a comprehensive format for bitmapped animations created by the same team as PNG. APNG's advantage is the smaller library size and compatibility with older PNG implementations.
Contents |
The APNG specification was created in 2004 by Stuart Parmenter and Vladimir Vukićević of the Mozilla Corporation to allow for storing the animations needed for interfaces such as throbbers. Mozilla had scrapped support for MNG animations, which provides a superset of APNG functionality, citing concerns about the large file size required for the expansive MNG decoder library;[1] the APNG decoder, built on the back of the PNG decoder, was a much smaller component.
Among users and maintainers of the PNG and MNG formats, APNG was not well received. In particular, PNG was conceived to be a single-image format.[2] APNG hides the subsequent frames in PNG ancillary chunks in such a way that APNG-unaware applications would ignore them, but there are otherwise no changes to the format to allow software to distinguish between animated and non-animated images. Some of the main concerns arising from this were the inability of applications to negotiate for PNG and APNG, or distinguish between PNG and APNG once received, or for legacy software to even inform users that there are additional frames. In effect this was a repeat of some of the same mistakes made in the GIF format 10 years earlier. Glenn Randers-Pehrson spearheaded efforts to reconcile the PNG purists' position with that of APNG proponents by recommending changes to APNG's format and proposing the use of a unique MIME type (e.g. video/png), but Mozilla rejected these proposals in favour of full backward compatibility.
The PNG group officially rejected APNG as an official extension on April 20, 2007.[3] There have been several subsequent proposals for a simple animated graphics format based on PNG using several different approaches.[4]
Mozilla Firefox added support for APNG in version 3 trunk builds on March 23, 2007.[5] However, because libpng is the PNG Group's reference implementation of the official specification, APNG support can never be supported in the main libpng distribution so long as it remains unratified by the Group. Iceweasel 3 now supports APNG by using Mozilla's unofficial variant of libpng.[6]
In 2008 WorldDMB adopted APNG as a backward compatible extension to enable animation as part of the MOT SlideShow user application for Digital Radio. "APNG 1.0 Specification - Animated Portable Network Graphics" is included as normative Annex A in the ETSI standard TS 101 499 V2.2.1 (2008-07). In 2010 Commercial Radio Broadcasters in Sydney began to include APNG animations in DAB+ digital radio broadcasts. These APNG animations are carried by the "MOT slideshow" application which accompanies the audio services. It is expected that other cities in Australia will follow in early 2011.
Mozilla's role in extending the PNG format to APNG echoes Netscape's much earlier role in popularizing animated GIFs.
| Type | Application | Support | |
|---|---|---|---|
| Image processing applications |
Adobe Photoshop | No | |
| cphktool APNG Anime Maker | v. 1 (June 9, 2009)[7] | ||
| Gamani GIF Movie Gear | v. 4.2 (March 2008)[8] | ||
| GIMP | with the APNG Plug-in. | ||
| ImageJ | v. 1.41g (July 3, 2008)[9] | ||
| Imagine | v. 1.0.4 (November 14, 2008)[10] | ||
| ImageMagick | No | ||
| Konvertor | v. 4.02 (May 2010)[11] | ||
| KSquirrel | v. 0.7.2 (October 3, 2007)[12] | ||
| Paint.NET | with the animation plugin | ||
| XnView | read-only, v. 1.97.4 (April 30, 2010)[13] | ||
| Web browsers | Gecko-based | Mozilla Firefox | v. 3 (June 17, 2008)[14][15] |
| SeaMonkey | v. 2 | ||
| Iceweasel and other rebranded Mozilla products by the Debian project | v. 4.0~b12[6] | ||
| Opera | v. 9.5 (September 17, 2008)[16] | ||
| Internet Explorer | No[17] | ||
| WebKit-based | Safari | No | |
| Google Chrome/Chromium | with APNG addon[18] | ||
| Mobile |
iPhone/iOS | with 3rd party library.[19] | |
| Android | with Firefox for Android | ||
| Opera Mobile | Windows Mobile | Yes | |
A server-side library exists that allows web browsers that support the canvas tag, but do not support APNG, to display APNGs.[20] Examples of such browsers include Google Chrome, Internet Explorer 9, and Apple Safari.
A PNG file consists of the PNG Signature (8 special bytes), followed by a series of chunks. A chunk consists of four parts: Length (4 bytes), Chunk type (4 bytes), Chunk data (length bytes) and CRC (Cyclic Redundancy Code / Checksum, 4 bytes).
| Length (4 bytes) |
Chunk type (4 bytes) |
Chunk data (length bytes) |
CRC (4 bytes) |
There are about 20 different chunk types, but for a minimal PNG, only 3 are required: The IHDR (image header) chunk, one or more IDAT (image data) chunks and the IEND (image end) chunk.
89 50 4E 47 0D 0A 1A 0APNG signature |
IHDRImage header |
IDATImage data |
IENDImage end |
The next graphic shows the contents of such a minimal PNG file, representing just one red pixel. The PNG signature bytes and the individual chunks are marked with colors. On the left side, the byte values are shown in hex format, on the right side as their equivalent characters from ISO-8859-1 with unrecognized and control characters replaced with periods. This dual display is common for hex editors. Note that the chunks are easy to identify because of their human readable 4-byte type names (in this example IHDR, IDAT & IEND).
| Hex | ISO-8859-1 |
|---|---|
|
|
|
The APNG specification introduces three new chunks: The animation control chunk (acTL), the frame control chunk (fcTL) and the frame data chunk (fdAT). The animation control chunk is a kind of "marker" chunk, telling the parser that this is an animated png. It contains information about how many frames the animation consists of and how many times the animation should play before coming to rest. The frame control chunk contains several bits of information, the most important of which is the display time of the following frame. The frame data chunks have the same structure as the IDAT chunks, except preceded by a sequence number. Sequence numbers apply to both frame control and frame data chunks, which together follow a common sequence, thus enabling the order and timing of frames to be recovered[21] should an APNG-unaware PNG editor re-order them as allowed by PNG chunk ordering rules.[22]
A program wanting to assemble several individual PNG files to an animated PNG could proceed as follows:
The next diagram illustrates this process.
The PNG specification was designed with future extensions in mind. An application reading a PNG file is supposed to simply ignore any chunks which it does not understand. This is the reason why APNG is "backwards compatible". Existing applications just recognize the first frame and ignore the additional animation chunks.
The MNG file format is a more powerful alternative to APNG, although it's a more complex format and has less web browser support.
The GIF file format has better application and browser support than APNG, but it is limited to 256 colors per frame and supports only 1 bit alpha transparency, by mapping one of the palette colors to transparent.
SVG combined with scripting or SMIL can animate vector graphics and can incorporate raster graphics. (See SVG animation.)
Dynamic graphics created with HTML 5 canvas Object can also be animated.
An alternative method for animations in web pages is to use conventional static images and animate them using JavaScript,[23] Adobe Flash, Microsoft Silverlight, Java or other plugin based technologies.
|
||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||